import React, { useState, useEffect } from "react";
import { NextPage } from "next";
import { Tabs } from "antd";
const { TabPane } = Tabs;

import { AdminLayout } from "@/layout";
import SYSSetting from "@/components/Setting/SYSSetting";
import OSSSetting from "@/components/Setting/OSSSetting";
import SEOSetting from "@/components/Setting/SEOSetting";
import SMTPSetting from "@/components/Setting/SMTPSetting";
import { SettingApi } from "@/api/setting";
import { useRouter } from "next/router";

const Setting = ({ type: defaultType }) => {
  const [settings, setSettings] = useState(null);
  const [type, setType] = useState(defaultType);
  const router = useRouter();
  useEffect(() => {
    SettingApi.getSettings().then(data => {
      setSettings(data);
    });
  }, []);
  const tabs = [
    {
      label: "系统设置",
      key: "sys",
      component: <SYSSetting settings={settings} />
    },
    {
      label: "OSS设置",
      key: "oss",
      component: <OSSSetting settings={settings} />
    },
    {
      label: "SEO设置",
      key: "seo",
      component: <SEOSetting settings={settings} />
    },
    {
      label: "SMTP",
      key: "smtp",
      component: <SMTPSetting settings={settings} />
    }
  ];
  return (
    <AdminLayout>
      <Tabs
        activeKey={type}
        onChange={key => {
          setType(key);
          router.push("/setting", "setting?type=" + key, { shallow: true });
        }}
      >
        {tabs.map(item => {
          return (
            <TabPane tab={item.label} key={item.key}>
              {item.component}
            </TabPane>
          );
        })}
      </Tabs>
    </AdminLayout>
  );
};

Setting.getInitialProps = async ctx => {
  const { type = "sys" } = ctx.query;
  return { type };
};
export default Setting;
